<template>
	<view class="vido-cont">
		<navbar-vido :isLandScape="isLandScape"></navbar-vido>
		<view class="view-conten">
			
		<view class="uni-padding-wrap uni-common-mt">
			<view class="vido-box" :style="{height: vidohige + 'px'}"> 
				<video id="myVideo"
					:src="oneVido.url" @error="videoErrorCallback" :danmu-list="danmuList" autoplay enable-danmu danmu-btn controls :poster="oneVido.poster" v-if="oneVido.poster" enable-play-gesture></video  >
			</view>
			<!-- #ifndef MP-ALIPAY -->
			<view class="uni-list uni-common-mt">
				<view class="uni-list-cell">
						<view class="uni-label">简介</view>
					<view class="uni-list-cell-db">
						<input v-model="danmuValue" class="uni-input" type="text" placeholder="点我发弹幕" />
						
						<view class="uni-btn-v">
							<view @click="sendDanmu" class="page-body-button">发送</view>
						</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view :style="{height:245 + 'px'}">
			
		</view>
		<view class="scroll-view-box">
			<scroll-view scroll-y="true" >
				<view class="text-vie">
					<view class="jieshoa">
						<view class="title inforTitle">
							<text>{{oneVido.title}}</text>
							<view class="sssss">
							{{oneVido.time}}
							</view>
						</view>
						<view class="fu-title inforTitle">
							<text>{{oneVido.fu_title}}</text>

						</view>
						<view class="sssss">
							<uni-icons color="#f00" class="uni-icons" type="minus" size="10"></uni-icons>
							未经作者允许禁止转载
						</view>
					</view>
					<view class="cainixin" @click="reload">
						——  热门视频  ——
					</view>
					<view class="guangg-content vido">
						<vido-list :list="vidoLists"></vido-list>
				
					</view>
				</view>
			</scroll-view>
			
		</view>
	</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				oneVido: {},
				src: '',
				vidohige:205,
				danmuList: [{
						text: '哇好棒哦',
						color: '#ff0000',
						time: 1
					},
					{
						text: '你是yyds',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: '',
				vidoLists: [],
				isLandScape: false
			};
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		onLoad(res) {
			this.oneVido = JSON.parse(decodeURIComponent(res.item));
			console.log(this.oneVido);
				this.get_video(10)
		},
		onResize() {
			uni.getSystemInfo({  
						success: (res) => {  
							if (res.windowWidth > res.windowHeight) {  
							   // 横屏
							   this.vidohige = res.windowHeight
								this.isLandScape = true
							} else {  
							   // 竖屏
							   this.vidohige = 205
								this.isLandScape = false
							}  
						}  
					})
		},
		methods: {
			reload(){
				this.get_video(10)
				
			},
			async get_video(mysize1=1){
				let videoList = await this.$api.get_video({
					mysize1: mysize1
				})
				if (!videoList) return false;
				if(mysize1==1){
					this.videoList = videoList[0]
				}else{
					this.vidoLists = videoList
				}
				console.log(videoList);
			},
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		}
	}
</script>

<style lang="scss">
.vido-cont{
	height: 100%;
	.view-conten{
	display: flex;
	flex-direction: column;
	position: relative;
		
	}
	.cainixin{
		font-weight: bold;
		margin-top: 15px;
		font-size: 16px;
		color: #666;
			display: flex;
			justify-content: center;
			margin-bottom: 15px;
			align-items: center;
	}
	.uni-padding-wrap{
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 22;
		background: #fff;
		.vido-box{
			background: #00FF00;
			video{
				width: 100%;
				height: 100%;
			}
		}
	}
	.uni-list-cell{
		color: #666;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 10px;
		height: 40px;
		box-shadow: 0px 2px 5px 0px rgba($color: #000000, $alpha: 0.1);
		.uni-label{
			width: 90px;
			text-align: center;
		}
		.uni-list-cell-db{
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
		}
		.uni-input{
			box-sizing: border-box;
			background-color: #f0f0f0;
			width: 100%;
				height: 32px;
				border-radius: 16px 0 0 16px;
				padding: 0 10px;
		}
		.uni-btn-v{
			
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 60px;
			border: 1px solid  #f0f0f0;
				height: 32px;
				border-radius:0 16px 16px 0;
				.page-body-button{
			box-sizing: border-box;
					padding-left: 5px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 100%;
				}
		}
	}
	.scroll-view-box{
		flex: 1;
		overflow: hidden;
	}
	.text-vie{
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.jieshoa{
			.title{
				font-weight: bold;
					// line-height: 40px;
				font-size: 14px;
			}
			.fu-title{
					line-height: 30px;
					font-size: 16px;
			}
			.sssss{
				font-size: 11px;
				color: #ccc;
				.uni-icons{
					margin-right: 5px;
					color: #f00;
				}
			}
		}
	}
			.inforTitle {
	box-sizing: border-box;
				font-size: 15px;
				position: relative;
				color: #333;
				// font-weight: 400;
				line-height: 1.2;
				// padding-right: 25px;
				text {
					// 俩行超出溢出
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
}
</style>
